<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关联</title>

    <link rel="stylesheet" href="/static/admin/plugin/select2/css/select2.css">
    <script src="/static/js/jquery-3.6.2.min.js"></script>
    <script src="/static/admin/plugin/select2/js/select2.js"></script>
    <link rel="stylesheet" href="/static/admin/layuiadmin/layui/css/layui.css">

    <link rel="stylesheet" href="/static/admin/plugin/codemirror-5.65.0/lib/codemirror.css">
    <script src="/static/admin/plugin/codemirror-5.65.0/lib/codemirror.js"></script>
    <link rel="stylesheet" href="/static/admin/plugin/codemirror-5.65.0/theme/rubyblue.css">
    <link rel="stylesheet" href="/static/admin/plugin/codemirror-5.65.0/addon/lint/lint.css">
    <script src="/static/admin/plugin/codemirror-5.65.0/addon/lint/lint.js"></script>
    <script src="/static/admin/plugin/codemirror-5.65.0/mode/php/php.js"></script>

</head>
<body>

<div style="display: flex;justify-content: space-between">
    <div style="width: 49%;display: flex;align-items: center;">
        <select name="table_name" id="table_name" class="select2" style="width: 100%">
            <option value="">请选择主表</option>
            {foreach $tables as $table}
            <option value="{$table.name}">{$table.comment}</option>
            {/foreach}
        </select>
        <span class="layui-btn" onclick="getFull()">获取完整关联</span>
    </div>
    <div style="width: 49%;display: flex;align-items: center;">
        <select name="ids[ ]" id="table_name2" class="select2" style="width: 100%" multiple>
            {foreach $tables as $table}
            <option value="{$table.id}">{$table.comment}</option>
            {/foreach}
        </select>
        <span class="layui-btn" onclick="getMini()">获取最小路径</span>
    </div>
</div>
<div style="display: flex;justify-content: space-between;">
    <div style="width: 49%">
        <textarea name="myTextarea1" id="myTextarea">{$codeFull}</textarea>
    </div>
    <div style="width: 49%">
        <textarea name="myTextarea1" id="myTextarea1">{$codeMini}</textarea>
    </div>
</div>


<div style="display: flex;justify-content: space-between;margin-top: 10px;">
    <hr style="min-height: 10px"/>
    <form style="width: 50%;" id="form">
        <div style="display: flex;align-items: center">
            <select name="table_name" id="table_name3" class="select2" style="width: 100%">
                <option value="">请选择主表</option>
                {foreach $tables as $table}
                <option value="{$table.name}">{$table.comment}</option>
                {/foreach}
            </select>
            <span class="layui-btn" onclick="getCode()">获取代码</span>
        </div>
        <div style="display: flex;flex-direction: column">
            <div>
                <table class="layui-table" style="width: 100%">
                    <tr>
                        <th>输入表</th>
                        <th>输入字段</th>
                        <th>条件</th>
                    </tr>
                    <tr>
                        <td style="text-align: right" colspan="3"><span class="layui-btn layui-btn-sm"
                                                                        onclick="addInput(this)">增加</span></td>
                    </tr>

                </table>
            </div>
            <div>
                <table class="layui-table" style="width: 100%">
                    <tr>
                        <th>输出表</th>
                        <th>输入字段</th>
                        <th>别名</th>
                    </tr>
                    <tr>
                        <td style="text-align: right" colspan="3"><span class="layui-btn layui-btn-sm"
                                                                        onclick="addOutput(this)">增加</span></td>
                    </tr>
                </table>
            </div>
        </div>


    </form>
    <div style="width: 49%">
        <textarea name="myTextarea1" id="myTextarea2">{$codeMini}</textarea>
    </div>
</div>

<script>
    let editor = CodeMirror.fromTextArea(myTextarea, {
        lineNumbers: true,
        theme: 'rubyblue',
        matchBrackets: true,
        mode: "application/x-httpd-php",

    });
    let editor1 = CodeMirror.fromTextArea(myTextarea1, {
        lineNumbers: true,
        theme: 'rubyblue',
        matchBrackets: true,
        mode: "application/x-httpd-php",

    });

    let editor2 = CodeMirror.fromTextArea(myTextarea2, {
        lineNumbers: true,
        theme: 'rubyblue',
        matchBrackets: true,
        mode: "application/x-httpd-php",

    });
</script>
<script>
    $('.select2').select2();
</script>

<script>
    function getFull() {
        let table_name = $('#table_name').val();
        if (table_name) {
            $.post('getFullLinks', {table_name}, (data) => {
                editor.setValue(data)
            })
        }
    }


    function getMini() {
        let table_name = $('#table_name').val();
        let ids = $('#table_name2').val();
        if (table_name) {
            $.post('getDbMini', {table_name, ids}, (data) => {
                editor1.setValue(data)
            })
        }

    }
</script>


<script>
    function addInput(obj) {
        let tr = $(obj).parents('tr');
        $(tr).before(`<tr>
<td>
<select name="in_tables[ ]" class="select2" onchange="getInFields(this)">
<option value="">请选择</option>
 {foreach $tables as $table}
     <option value="{$table.name}">{$table.comment}</option>
 {/foreach}
</select>
</td>
<td>
<select name="in_fields[ ]" class="select2"  onchange="getCondition(this)"></select>
</td>
<td>
<input name="in_conditions[ ]" type="text" class="layui-input">
</td>
</tr>`);
        $('.select2').select2();
    }

    function addOutput(obj) {
        let tr = $(obj).parents('tr');
        $(tr).before(`<tr>
<td>
<select name="out_tables[ ]" class="select2" onchange="getOutFields(this)">
<option value="">请选择</option>
 {foreach $tables as $table}
     <option value="{$table.name}">{$table.comment}</option>
 {/foreach}
</select>
</td>
<td>
<select name="out_fields[ ]" class="select2" onchange="getAlias(this)"></select>
</td>
<td>
<input name="out_alias[ ]" type="text" class="layui-input">
</td>
</tr>`);
        $('.select2').select2();
    }
</script>


<script>


    function getInFields(obj) {
        let url = 'getFieldOptionsByTableName';
        let table_name = obj.value;
        $.post(url, {table_name}, (res) => {
            $(obj).parents('tr').find("select[name='in_fields[ ]']").html(res).select2();
        })
    }

    function getOutFields(obj) {
        let url = 'getFieldOptionsByTableName';
        let table_name = obj.value;
        $.post(url, {table_name}, (res) => {
            $(obj).parents('tr').find("select[name='out_fields[ ]']").html(res).select2();
        })
    }

    function getAlias(obj) {
        let input = $(obj).parents('tr').find("input[name='out_alias[ ]']");
        if (obj.value) {
            let data = $($(obj).select2('data')[0].element).data('alias');
            input.val(data)
        } else {
            input.val('')
        }

    }

    function getCondition(obj) {
        let input = $(obj).parents('tr').find("input[name='in_conditions[ ]']");
        if (obj.value) {
            let data = $($(obj).select2('data')[0].element).data('alias');
            input.val("= input('"  + data + "')")
        } else {
            input.val('')
        }
    }

</script>

<script>
    function getCode() {
        let data = $('#form').serializeArray();
        $.ajax({
            url: 'getCode',
            type: 'post',
            async: true,
            data,
            dataType: 'json',
            success: function (result) {
                let code = result.result;
                editor2.setValue(code)
            },
            error: function (xhr, textStatus) {
                alert("程序出错，请联系管理员");
            },

        })
    }

</script>
</body>
</html>
